<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>百度-普通版统计 API 使用 | Beiysd</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="manifest" href="/manifest.json">
    <link rel="apple-touch-icon" href="/assets/logo/pkp.png">
    <script>var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?345ab2bf830dc5c68a96925eb1dd0b45";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
      })();</script>
    <meta name="description" content="Live and Study.">
    
    <link rel="preload" href="/assets/css/0.styles.bd7bd1ca.css" as="style"><link rel="preload" href="/assets/js/app.17b6b866.js" as="script"><link rel="preload" href="/assets/js/3.16fca902.js" as="script"><link rel="preload" href="/assets/js/2.aa0e2402.js" as="script"><link rel="preload" href="/assets/js/51.ad770490.js" as="script"><link rel="prefetch" href="/assets/js/10.71654f5d.js"><link rel="prefetch" href="/assets/js/11.e3df8a38.js"><link rel="prefetch" href="/assets/js/12.f6e1589f.js"><link rel="prefetch" href="/assets/js/13.8ac48caf.js"><link rel="prefetch" href="/assets/js/14.2a93538f.js"><link rel="prefetch" href="/assets/js/15.ed5b285c.js"><link rel="prefetch" href="/assets/js/16.5e1e59d5.js"><link rel="prefetch" href="/assets/js/17.1da7896e.js"><link rel="prefetch" href="/assets/js/18.6f1b273c.js"><link rel="prefetch" href="/assets/js/19.30d92fa3.js"><link rel="prefetch" href="/assets/js/20.1068c4cc.js"><link rel="prefetch" href="/assets/js/21.f3d90412.js"><link rel="prefetch" href="/assets/js/22.a3c35868.js"><link rel="prefetch" href="/assets/js/23.3dfaf7a4.js"><link rel="prefetch" href="/assets/js/24.b7562cb8.js"><link rel="prefetch" href="/assets/js/25.94bbff07.js"><link rel="prefetch" href="/assets/js/26.9cbdf92e.js"><link rel="prefetch" href="/assets/js/27.e2189a25.js"><link rel="prefetch" href="/assets/js/28.12e893b0.js"><link rel="prefetch" href="/assets/js/29.ab1115c9.js"><link rel="prefetch" href="/assets/js/30.e2112157.js"><link rel="prefetch" href="/assets/js/31.76cdc758.js"><link rel="prefetch" href="/assets/js/32.c94896d8.js"><link rel="prefetch" href="/assets/js/33.0841fa36.js"><link rel="prefetch" href="/assets/js/34.831fd380.js"><link rel="prefetch" href="/assets/js/35.b0449875.js"><link rel="prefetch" href="/assets/js/36.30a8c074.js"><link rel="prefetch" href="/assets/js/37.1aec4dbc.js"><link rel="prefetch" href="/assets/js/38.ccd6cdf9.js"><link rel="prefetch" href="/assets/js/39.c10337d7.js"><link rel="prefetch" href="/assets/js/4.98a034f9.js"><link rel="prefetch" href="/assets/js/40.addec5bb.js"><link rel="prefetch" href="/assets/js/41.e3e62de0.js"><link rel="prefetch" href="/assets/js/42.ba7501f2.js"><link rel="prefetch" href="/assets/js/43.d8fa5ea0.js"><link rel="prefetch" href="/assets/js/44.d6dbcdb3.js"><link rel="prefetch" href="/assets/js/45.fe55507d.js"><link rel="prefetch" href="/assets/js/46.6af0f2df.js"><link rel="prefetch" href="/assets/js/47.0560a688.js"><link rel="prefetch" href="/assets/js/48.ab74b154.js"><link rel="prefetch" href="/assets/js/49.7ed2bcd8.js"><link rel="prefetch" href="/assets/js/5.2ca1c567.js"><link rel="prefetch" href="/assets/js/50.0f22d3af.js"><link rel="prefetch" href="/assets/js/52.bc1bd98c.js"><link rel="prefetch" href="/assets/js/53.9ff88855.js"><link rel="prefetch" href="/assets/js/54.f2b42c40.js"><link rel="prefetch" href="/assets/js/55.3d551cd8.js"><link rel="prefetch" href="/assets/js/56.bbf7abd0.js"><link rel="prefetch" href="/assets/js/57.4b2fbc05.js"><link rel="prefetch" href="/assets/js/58.4ff6654e.js"><link rel="prefetch" href="/assets/js/59.92969875.js"><link rel="prefetch" href="/assets/js/6.f1011be9.js"><link rel="prefetch" href="/assets/js/60.4fb5be24.js"><link rel="prefetch" href="/assets/js/61.661f240d.js"><link rel="prefetch" href="/assets/js/62.d08a0fee.js"><link rel="prefetch" href="/assets/js/63.607fa9fb.js"><link rel="prefetch" href="/assets/js/64.bfa429e4.js"><link rel="prefetch" href="/assets/js/65.e184bc74.js"><link rel="prefetch" href="/assets/js/7.28ea5937.js"><link rel="prefetch" href="/assets/js/8.d804616d.js"><link rel="prefetch" href="/assets/js/9.7977e413.js">
    <link rel="stylesheet" href="/assets/css/0.styles.bd7bd1ca.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/assets/logo/pkq.png" alt="Beiysd" class="logo"> <span class="site-name can-hide">Beiysd</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="https://github.com/Beiysd" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://gitee.com/beiysd" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://blog.csdn.net/weixin_40532650" target="_blank" rel="noopener noreferrer" class="nav-link external">
  CSDN
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="https://github.com/Beiysd" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://gitee.com/beiysd" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://blog.csdn.net/weixin_40532650" target="_blank" rel="noopener noreferrer" class="nav-link external">
  CSDN
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>前端</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>CSS</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>常用方法</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>React</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>JavaScript</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading open"><span>Vuepress</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/notes/10-前端/50-Vuepress/10-注意事项.html" class="sidebar-link">注意事项</a></li><li><a href="/notes/10-前端/50-Vuepress/11-代码块复制.html" class="sidebar-link">代码块复制</a></li><li><a href="/notes/10-前端/50-Vuepress/12-全局搜索.html" class="sidebar-link">全局搜索</a></li><li><a href="/notes/10-前端/50-Vuepress/13-图片放大.html" class="sidebar-link">图片放大</a></li><li><a href="/notes/10-前端/50-Vuepress/14-样式更改.html" class="sidebar-link">样式更改</a></li><li><a href="/notes/10-前端/50-Vuepress/15-引入百度普通版统计.html" class="sidebar-link">引入百度普通版统计</a></li><li><a href="/notes/10-前端/50-Vuepress/16-自定义主题开发.html" class="sidebar-link">自定义主题开发</a></li><li><a href="/notes/10-前端/50-Vuepress/17-百度普通版统计API使用.html" class="active sidebar-link">百度普通版统计API使用</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/notes/10-前端/50-Vuepress/17-百度普通版统计API使用.html#_1-必要条件" class="sidebar-link">1 必要条件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/notes/10-前端/50-Vuepress/17-百度普通版统计API使用.html#_1-1-在-vuepress-项目中已引入百度统计" class="sidebar-link">1.1 在 vuepress 项目中已引入百度统计</a></li></ul></li><li class="sidebar-sub-header"><a href="/notes/10-前端/50-Vuepress/17-百度普通版统计API使用.html#_2-百度统计-api-必要参数获取" class="sidebar-link">2 百度统计 API 必要参数获取</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/notes/10-前端/50-Vuepress/17-百度普通版统计API使用.html#_2-1-登录百度统计" class="sidebar-link">2.1 登录百度统计</a></li><li class="sidebar-sub-header"><a href="/notes/10-前端/50-Vuepress/17-百度普通版统计API使用.html#_2-2-登录百度开发者中心控制台" class="sidebar-link">2.2 登录百度开发者中心控制台</a></li><li class="sidebar-sub-header"><a href="/notes/10-前端/50-Vuepress/17-百度普通版统计API使用.html#_2-3-调用-url-获取授权码" class="sidebar-link">2.3 调用 URL 获取授权码</a></li><li class="sidebar-sub-header"><a href="/notes/10-前端/50-Vuepress/17-百度普通版统计API使用.html#_2-4-获取-access-token" class="sidebar-link">2.4 获取 ACCESS_TOKEN</a></li><li class="sidebar-sub-header"><a href="/notes/10-前端/50-Vuepress/17-百度普通版统计API使用.html#_2-5-获取你的网站信息列表" class="sidebar-link">2.5 获取你的网站信息列表</a></li><li class="sidebar-sub-header"><a href="/notes/10-前端/50-Vuepress/17-百度普通版统计API使用.html#_2-6-更新-access-token" class="sidebar-link">2.6 更新 ACCESS_TOKEN</a></li></ul></li><li class="sidebar-sub-header"><a href="/notes/10-前端/50-Vuepress/17-百度普通版统计API使用.html#_3-api-线上调试" class="sidebar-link">3 API 线上调试</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/notes/10-前端/50-Vuepress/17-百度普通版统计API使用.html#_3-1-入口在数据导出服务页面的底部" class="sidebar-link">3.1 入口在数据导出服务页面的底部</a></li><li class="sidebar-sub-header"><a href="/notes/10-前端/50-Vuepress/17-百度普通版统计API使用.html#_3-2-调用结果" class="sidebar-link">3.2 调用结果</a></li><li class="sidebar-sub-header"><a href="/notes/10-前端/50-Vuepress/17-百度普通版统计API使用.html#_3-3-请求参数及示例" class="sidebar-link">3.3 请求参数及示例</a></li></ul></li><li class="sidebar-sub-header"><a href="/notes/10-前端/50-Vuepress/17-百度普通版统计API使用.html#_4-vuepress-调用百度统计-api-接口" class="sidebar-link">4 vuepress 调用百度统计 API 接口</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/notes/10-前端/50-Vuepress/17-百度普通版统计API使用.html#_4-1-创建请求-js-文件" class="sidebar-link">4.1 创建请求 JS 文件</a></li><li class="sidebar-sub-header"><a href="/notes/10-前端/50-Vuepress/17-百度普通版统计API使用.html#_4-2-跨域处理" class="sidebar-link">4.2 跨域处理</a></li><li class="sidebar-sub-header"><a href="/notes/10-前端/50-Vuepress/17-百度普通版统计API使用.html#_4-3-异步处理" class="sidebar-link">4.3 异步处理</a></li><li class="sidebar-sub-header"><a href="/notes/10-前端/50-Vuepress/17-百度普通版统计API使用.html#_4-4-完整-tongji-js-代码" class="sidebar-link">4.4 完整 tongji.js 代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/notes/10-前端/50-Vuepress/17-百度普通版统计API使用.html#_5-页面效果" class="sidebar-link">5 页面效果</a></li></ul></li></ul></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>Taro小程序</span> <span class="arrow right"></span></p> <!----></section></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>后端</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>随笔</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>杂谈</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>开发相关</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"><h3 class="page_title">百度-普通版统计 API 使用</h3> <ul class="uls"><li title="标签" class="lis"><img src="/assets/img/tag.f21efeeb.svg" class="icons">vuepress
    </li> <li title="更新时间" class="lis"><img src="/assets/img/clock.ffb2d0be.svg" class="icons">2021-04-23
    </li> <li title="浏览人数" class="lis"><img src="/assets/img/eye.e9087eed.svg" class="icons">0
    </li></ul>  <div class="theme-default-content content__default"><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>⭐️ ⭐️ 这是百度普通版统计 API 使用，而非百度商用版 API</p> <p><a href="https://tongji.baidu.com/web/welcome/login" target="_blank" rel="noopener noreferrer">百度统计<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><a href="https://tongji.baidu.com/api/manual/" target="_blank" rel="noopener noreferrer">百度统计-用户手册<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>这里有各式各样的请求参数和示例，总能找到你想要的返回数据</p></div> <h2 id="_1-必要条件"><a href="#_1-必要条件" class="header-anchor">#</a> 1 必要条件</h2> <h3 id="_1-1-在-vuepress-项目中已引入百度统计"><a href="#_1-1-在-vuepress-项目中已引入百度统计" class="header-anchor">#</a> 1.1 在 vuepress 项目中已引入百度统计</h3> <p>详情可见：<a href="/notes/10-前端/50-Vuepress/15-引入百度普通版统计.html">引入百度普通版统计</a></p> <h2 id="_2-百度统计-api-必要参数获取"><a href="#_2-百度统计-api-必要参数获取" class="header-anchor">#</a> 2 百度统计 API 必要参数获取</h2> <h3 id="_2-1-登录百度统计"><a href="#_2-1-登录百度统计" class="header-anchor">#</a> 2.1 登录百度统计</h3> <p>进入管理页面下的其他设置-数据导出服务</p> <h3 id="_2-2-登录百度开发者中心控制台"><a href="#_2-2-登录百度开发者中心控制台" class="header-anchor">#</a> 2.2 登录百度开发者中心控制台</h3> <p><img src="/assets/md-imgs/baidu/baidu_tongji_05.png" alt="百度开发者中心控制台"></p> <p>可以查看到自己的基本信息</p> <p><img src="/assets/md-imgs/baidu/baidu_tongji_06.png" alt="基本信息"></p> <h3 id="_2-3-调用-url-获取授权码"><a href="#_2-3-调用-url-获取授权码" class="header-anchor">#</a> 2.3 调用 URL 获取授权码</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code>http<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>openapi<span class="token punctuation">.</span>baidu<span class="token punctuation">.</span>com<span class="token operator">/</span>oauth<span class="token operator">/</span><span class="token number">2.0</span><span class="token operator">/</span>authorize<span class="token operator">?</span>response_type<span class="token operator">=</span>code<span class="token operator">&amp;</span>client_id<span class="token operator">=</span><span class="token punctuation">{</span><span class="token constant">CLIENT_ID</span><span class="token punctuation">}</span><span class="token operator">&amp;</span>redirect_uri<span class="token operator">=</span><span class="token punctuation">{</span><span class="token constant">REDIRECT_URI</span><span class="token punctuation">}</span><span class="token operator">&amp;</span>scope<span class="token operator">=</span>basic<span class="token operator">&amp;</span>display<span class="token operator">=</span>popup

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><img src="/assets/md-imgs/baidu/baidu_tongji_07.png" alt="基本信息"></p> <p><img src="/assets/md-imgs/baidu/baidu_tongji_08.png" alt="基本信息"></p> <h3 id="_2-4-获取-access-token"><a href="#_2-4-获取-access-token" class="header-anchor">#</a> 2.4 获取 ACCESS_TOKEN</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code>http<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>openapi<span class="token punctuation">.</span>baidu<span class="token punctuation">.</span>com<span class="token operator">/</span>oauth<span class="token operator">/</span><span class="token number">2.0</span><span class="token operator">/</span>token<span class="token operator">?</span>grant_type<span class="token operator">=</span>authorization_code<span class="token operator">&amp;</span>code<span class="token operator">=</span><span class="token punctuation">{</span><span class="token constant">CODE</span><span class="token punctuation">}</span><span class="token operator">&amp;</span>client_id<span class="token operator">=</span><span class="token punctuation">{</span><span class="token constant">CLIENT_ID</span><span class="token punctuation">}</span><span class="token operator">&amp;</span>client_secret<span class="token operator">=</span><span class="token punctuation">{</span><span class="token constant">CLIENT_SECRET</span><span class="token punctuation">}</span><span class="token operator">&amp;</span>redirect_uri<span class="token operator">=</span><span class="token punctuation">{</span><span class="token constant">REDIRECT_URI</span><span class="token punctuation">}</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><img src="/assets/md-imgs/baidu/baidu_tongji_09.png" alt="基本信息"></p> <h3 id="_2-5-获取你的网站信息列表"><a href="#_2-5-获取你的网站信息列表" class="header-anchor">#</a> 2.5 获取你的网站信息列表</h3> <blockquote><p>⭐️ 有一个重要参数-网站 ID，是请求数据用到的参数，我一度把它和控制台中的 ID 记混</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code>https<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>openapi<span class="token punctuation">.</span>baidu<span class="token punctuation">.</span>com<span class="token operator">/</span>rest<span class="token operator">/</span><span class="token number">2.0</span><span class="token operator">/</span>tongji<span class="token operator">/</span>config<span class="token operator">/</span>getSiteList<span class="token operator">?</span>access_token<span class="token operator">=</span><span class="token number">1.</span>a6b7dbd428f731035f771b8d15063f61<span class="token punctuation">.</span><span class="token number">86400.1292922000</span><span class="token operator">-</span><span class="token number">2346678</span><span class="token operator">-</span><span class="token number">124328</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><img src="/assets/md-imgs/baidu/baidu_tongji_10_1.png" alt="基本信息"></p> <p><img src="/assets/md-imgs/baidu/baidu_tongji_10.png" alt="基本信息"></p> <h3 id="_2-6-更新-access-token"><a href="#_2-6-更新-access-token" class="header-anchor">#</a> 2.6 更新 ACCESS_TOKEN</h3> <p>ACCESS_TOKEN：有效期一个月</p> <p>REFRESH_TOKEN：有效期 10 年</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>http<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>openapi<span class="token punctuation">.</span>baidu<span class="token punctuation">.</span>com<span class="token operator">/</span>oauth<span class="token operator">/</span><span class="token number">2.0</span><span class="token operator">/</span>token<span class="token operator">?</span>grant_type<span class="token operator">=</span>refresh_token<span class="token operator">&amp;</span>refresh_token<span class="token operator">=</span><span class="token punctuation">{</span><span class="token constant">REFRESH_TOKEN</span><span class="token punctuation">}</span><span class="token operator">&amp;</span>client_id<span class="token operator">=</span><span class="token punctuation">{</span><span class="token constant">CLIENT_ID</span><span class="token punctuation">}</span><span class="token operator">&amp;</span>client_secret<span class="token operator">=</span><span class="token punctuation">{</span><span class="token constant">CLIENT_SECRET</span><span class="token punctuation">}</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><img src="/assets/md-imgs/baidu/baidu_tongji_10_2.png" alt="基本信息"></p> <p>至此所有主要信息已获取：</p> <p>site_id = 网站 ID；</p> <p>ACCESS_TOKEN = 身份验证信息；</p> <p>REFRESH_TOKEN = 后续更新 ACCESS_TOKEN 所必须</p> <h2 id="_3-api-线上调试"><a href="#_3-api-线上调试" class="header-anchor">#</a> 3 API 线上调试</h2> <h3 id="_3-1-入口在数据导出服务页面的底部"><a href="#_3-1-入口在数据导出服务页面的底部" class="header-anchor">#</a> 3.1 入口在数据导出服务页面的底部</h3> <p><img src="/assets/md-imgs/baidu/baidu_tongji_11_1.png" alt="基本信息"></p> <p><img src="/assets/md-imgs/baidu/baidu_tongji_11.png" alt="基本信息"></p> <h3 id="_3-2-调用结果"><a href="#_3-2-调用结果" class="header-anchor">#</a> 3.2 调用结果</h3> <p><img src="/assets/md-imgs/baidu/baidu_tongji_12.png" alt="基本信息"></p> <h3 id="_3-3-请求参数及示例"><a href="#_3-3-请求参数及示例" class="header-anchor">#</a> 3.3 请求参数及示例</h3> <p><a href="https://tongji.baidu.com/api/manual/" target="_blank" rel="noopener noreferrer">百度统计-用户手册<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>这里有各式各样的请求参数和示例，总能找到你想要的返回数据</p> <p><img src="/assets/md-imgs/baidu/baidu_tongji_13.png" alt="基本信息"></p> <h2 id="_4-vuepress-调用百度统计-api-接口"><a href="#_4-vuepress-调用百度统计-api-接口" class="header-anchor">#</a> 4 vuepress 调用百度统计 API 接口</h2> <h3 id="_4-1-创建请求-js-文件"><a href="#_4-1-创建请求-js-文件" class="header-anchor">#</a> 4.1 创建请求 JS 文件</h3> <p>创建 tongji.js 文件（名字随意，认得就行），该文件放在 theme 文件夹下的 util（工具包）下，便于管理；</p> <h3 id="_4-2-跨域处理"><a href="#_4-2-跨域处理" class="header-anchor">#</a> 4.2 跨域处理</h3> <p>此处使用 Ajax 的 get 请求，dataType=jsonp 的形式；</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">//请求百度统计公开接口获取统计数据</span>
<span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">getBaidu</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> num <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token keyword">await</span> $<span class="token punctuation">.</span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    type<span class="token operator">:</span> <span class="token string">&quot;get&quot;</span><span class="token punctuation">,</span>
    dataType<span class="token operator">:</span> <span class="token string">&quot;jsonp&quot;</span><span class="token punctuation">,</span>
    url<span class="token operator">:</span> <span class="token string">&quot;https://openapi.baidu.com/rest/2.0/tongji/report/getData&quot;</span><span class="token punctuation">,</span>
    data<span class="token operator">:</span> <span class="token punctuation">{</span>
      access_token<span class="token operator">:</span> <span class="token string">&quot;xxx&quot;</span><span class="token punctuation">,</span> <span class="token comment">//身份验证</span>
      site_id<span class="token operator">:</span> <span class="token string">&quot;xxx&quot;</span><span class="token punctuation">,</span> <span class="token comment">//网站id</span>
      method<span class="token operator">:</span> <span class="token string">&quot;overview/getCommonTrackRpt&quot;</span><span class="token punctuation">,</span> <span class="token comment">//需要的报告范围</span>
      start_date<span class="token operator">:</span> <span class="token string">&quot;20210401&quot;</span><span class="token punctuation">,</span> <span class="token comment">//开始时间</span>
      end_date<span class="token operator">:</span> <span class="token string">&quot;20310401&quot;</span><span class="token punctuation">,</span> <span class="token comment">//结束时间</span>
      metrics<span class="token operator">:</span> <span class="token string">&quot;pv_count&quot;</span><span class="token punctuation">,</span> <span class="token comment">//报告所包含的数据类，pv_count=浏览量</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      num <span class="token operator">=</span> <span class="token function">visiteNum</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//数据处理</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">error</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;error======&quot;</span><span class="token punctuation">,</span> err<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> num<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><h3 id="_4-3-异步处理"><a href="#_4-3-异步处理" class="header-anchor">#</a> 4.3 异步处理</h3> <p>因为要等待接口返回值计算后得出浏览量，在 4.2 中使用的 async + await 形式就是 ES6 中的异步处理方法</p> <p>这又引起了另一个问题，异步处理的返回值问题，返回值并非正常的数据，则需要入口方法进行的数据处理</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> $ <span class="token keyword">from</span> <span class="token string">&quot;jquery&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> nowPageUrl <span class="token operator">=</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>

<span class="token comment">//入口方法</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getCount</span><span class="token punctuation">(</span><span class="token parameter">path</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  nowPageUrl <span class="token operator">=</span> path<span class="token punctuation">;</span>
  <span class="token comment">//</span>
  <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token function">getBaidu</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token function">resolve</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>页面引用时</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>methords<span class="token operator">:</span><span class="token punctuation">{</span>
    <span class="token function-variable function">visiteChange</span><span class="token operator">:</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">//this.$page vuepress自带方法</span>
        <span class="token comment">//this.$page.path=当前页面的路径，为了在众多返回数据中，筛选当前页浏览量</span>
        <span class="token keyword">const</span> num <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getCount</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$page<span class="token punctuation">.</span>path<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>visite <span class="token operator">=</span> num<span class="token punctuation">;</span><span class="token comment">//浏览量</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>数据处理</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">//计算对应页面的浏览量</span>
<span class="token keyword">function</span> <span class="token function">visiteNum</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> visite <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token comment">//计算总浏览量</span>

  <span class="token keyword">if</span> <span class="token punctuation">(</span>data <span class="token operator">&amp;&amp;</span> data<span class="token punctuation">.</span>visitPage<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>nowPageUrl <span class="token operator">===</span> <span class="token string">&quot;home&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// visite = data.sourceSite.items[0][1];-直观统计包括了本地测试域名和正式域名浏览量之和</span>
      <span class="token comment">//受访页面列表</span>
      <span class="token keyword">const</span> items <span class="token operator">=</span> data<span class="token punctuation">.</span>visitPage<span class="token punctuation">.</span>items <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token comment">//查询对应域名下精确统计总数</span>
      <span class="token keyword">const</span> arrs <span class="token operator">=</span> items<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>
        <span class="token punctuation">(</span><span class="token parameter">v</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> v<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>origin<span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span>
      <span class="token punctuation">)</span><span class="token punctuation">;</span>
      visite <span class="token operator">=</span> arrs<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">pre<span class="token punctuation">,</span> cur</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        pre <span class="token operator">+=</span> <span class="token function">Number</span><span class="token punctuation">(</span>cur<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> pre<span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
      <span class="token comment">//计算单页面浏览量</span>
      <span class="token comment">// encodeURI-转码</span>
      <span class="token comment">// decodeURI-解码</span>
      <span class="token comment">//受访页面列表</span>
      <span class="token keyword">const</span> items <span class="token operator">=</span> data<span class="token punctuation">.</span>visitPage<span class="token punctuation">.</span>items <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token comment">//当前页面完整地址</span>
      <span class="token keyword">const</span> pathurl <span class="token operator">=</span> window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>origin <span class="token operator">+</span> nowPageUrl<span class="token punctuation">;</span>
      <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> items<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>items<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">===</span> pathurl<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          visite <span class="token operator">=</span> items<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> visite<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br></div></div><h3 id="_4-4-完整-tongji-js-代码"><a href="#_4-4-完整-tongji-js-代码" class="header-anchor">#</a> 4.4 完整 tongji.js 代码</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/*
 * @name:
 * @author: wuxd
 * @Date: 2021-04-22 09:25:01
 * @LastEditTime: 2021-04-23 16:55:14
 */</span>
<span class="token keyword">import</span> $ <span class="token keyword">from</span> <span class="token string">&quot;jquery&quot;</span><span class="token punctuation">;</span> <span class="token comment">//在vuepress所属package.json中安装jquery</span>
<span class="token keyword">var</span> nowPageUrl <span class="token operator">=</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>

<span class="token comment">//入口方法</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getCount</span><span class="token punctuation">(</span><span class="token parameter">path</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  nowPageUrl <span class="token operator">=</span> path<span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token function">getBaidu</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token function">resolve</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">//请求百度统计公开接口获取统计数据</span>
<span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">getBaidu</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> num <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token keyword">await</span> $<span class="token punctuation">.</span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    type<span class="token operator">:</span> <span class="token string">&quot;get&quot;</span><span class="token punctuation">,</span>
    dataType<span class="token operator">:</span> <span class="token string">&quot;jsonp&quot;</span><span class="token punctuation">,</span>
    url<span class="token operator">:</span> <span class="token string">&quot;https://openapi.baidu.com/rest/2.0/tongji/report/getData&quot;</span><span class="token punctuation">,</span>
    data<span class="token operator">:</span> <span class="token punctuation">{</span>
      access_token<span class="token operator">:</span> <span class="token string">&quot;xxx&quot;</span><span class="token punctuation">,</span> <span class="token comment">//</span>
      site_id<span class="token operator">:</span> <span class="token string">&quot;xxx&quot;</span><span class="token punctuation">,</span>
      method<span class="token operator">:</span> <span class="token string">&quot;overview/getCommonTrackRpt&quot;</span><span class="token punctuation">,</span>
      start_date<span class="token operator">:</span> <span class="token string">&quot;20210401&quot;</span><span class="token punctuation">,</span>
      end_date<span class="token operator">:</span> <span class="token string">&quot;20310401&quot;</span><span class="token punctuation">,</span>
      metrics<span class="token operator">:</span> <span class="token string">&quot;pv_count&quot;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      num <span class="token operator">=</span> <span class="token function">visiteNum</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">error</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;error======&quot;</span><span class="token punctuation">,</span> err<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> num<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">//计算对应页面的浏览量</span>
<span class="token keyword">function</span> <span class="token function">visiteNum</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> visite <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token comment">//计算总浏览量</span>

  <span class="token keyword">if</span> <span class="token punctuation">(</span>data <span class="token operator">&amp;&amp;</span> data<span class="token punctuation">.</span>visitPage<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>nowPageUrl <span class="token operator">===</span> <span class="token string">&quot;home&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// visite = data.sourceSite.items[0][1];-直观统计包括了本地测试域名和正式域名浏览量之和</span>
      <span class="token comment">//受访页面列表</span>
      <span class="token keyword">const</span> items <span class="token operator">=</span> data<span class="token punctuation">.</span>visitPage<span class="token punctuation">.</span>items <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token comment">//查询对应域名下精确统计总数</span>
      <span class="token keyword">const</span> arrs <span class="token operator">=</span> items<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>
        <span class="token punctuation">(</span><span class="token parameter">v</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> v<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>origin<span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span>
      <span class="token punctuation">)</span><span class="token punctuation">;</span>
      visite <span class="token operator">=</span> arrs<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">pre<span class="token punctuation">,</span> cur</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        pre <span class="token operator">+=</span> <span class="token function">Number</span><span class="token punctuation">(</span>cur<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> pre<span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
      <span class="token comment">//计算单页面浏览量</span>
      <span class="token comment">// encodeURI-转码</span>
      <span class="token comment">// decodeURI-解码</span>
      <span class="token comment">//受访页面列表</span>
      <span class="token keyword">const</span> items <span class="token operator">=</span> data<span class="token punctuation">.</span>visitPage<span class="token punctuation">.</span>items <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token comment">//当前页面完整地址</span>
      <span class="token keyword">const</span> pathurl <span class="token operator">=</span> window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>origin <span class="token operator">+</span> nowPageUrl<span class="token punctuation">;</span>
      <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> items<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>items<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">===</span> pathurl<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          visite <span class="token operator">=</span> items<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> visite<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br></div></div><h2 id="_5-页面效果"><a href="#_5-页面效果" class="header-anchor">#</a> 5 页面效果</h2> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>⭐️ 因为路径有中文所以会被转译</p> <p>⭐️ 页面打印 this.$page 就会发现 path 中的中文也是被转译过的</p> <p><img src="/assets/md-imgs/baidu/baidu_tongji_15.png" alt="基本信息"></p></div> <p><img src="/assets/md-imgs/baidu/baidu_tongji_14.png" alt="基本信息"></p></div> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/notes/10-前端/50-Vuepress/16-自定义主题开发.html" class="prev">
        自定义主题开发
      </a></span> <span class="next"><a href="/notes/10-前端/60-Taro小程序/less_sass插件安装报错问题.html">
        less_sass插件安装报错问题
      </a>
      →
    </span></p></div>  <button>click</button> <div class="back_top_content" data-v-26f75736><!----></div></main></div><div class="global-ui"><MySWUpdatePopup></MySWUpdatePopup></div></div>
    <script src="/assets/js/app.17b6b866.js" defer></script><script src="/assets/js/3.16fca902.js" defer></script><script src="/assets/js/2.aa0e2402.js" defer></script><script src="/assets/js/51.ad770490.js" defer></script>
  </body>
</html>
